import React, { Component, Fragment } from 'react';
import { Form } from '@ant-design/compatible';

import {
    Card, Row, Col, InputNumber,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Item } = Form;
interface ShelvesToHeapProps {
    getFieldDecorator: any;
    detailInfo: any;
    maxCents: any;
    maxPercentage: any;
}

class ShelvesToHeapElem extends Component<ShelvesToHeapProps> {
    renderShelvesElem = (getFieldDecorator: any, detailInfo: any, maxCents: any, maxPercentage: any) => (
        <Card title="货架取件超时配置" bordered={false}>
            <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                <Col md={8} sm={24} style={{ display: 'flex' }}>
                    <Item
                        label="收费价格"
                        colon={false}
                        style={{ flex: 1 }}
                    >
                        {getFieldDecorator('shelfCharge', ({
                            initialValue: detailInfo.shelfCharge,
                            rules: [{ required: true, message: '请输入收费价格' }],
                        }))(
                            <InputNumber
                                min={0}
                                max={maxCents}
                                step={1}
                                placeholder="请输入"
                                style={{ width: '100%' }}
                            />,
                        )}
                    </Item>
                    <span className="marginL8" style={{ lineHeight: '32px' }}>分</span>
                </Col>
                <Col md={8} sm={24} style={{ display: 'flex' }}>
                    <Item
                        label="免费时间"
                        colon={false}
                        style={{ flex: 1 }}
                    >
                        {getFieldDecorator('shelfNormalTime', ({
                            initialValue: detailInfo.shelfNormalTime,
                            rules: [{ required: true, message: '请输入免费时间' }],
                        }))(
                            <InputNumber
                                min={0}
                                step={1}
                                placeholder="请输入"
                                style={{ width: '100%' }}
                            />,
                        )}
                    </Item>
                    <span className="marginL8" style={{ lineHeight: '32px' }}>小时</span>
                </Col>
                <Col md={8} sm={24} style={{ display: 'flex' }}>
                    <Item
                        label="间隔收费"
                        colon={false}
                        style={{ flex: 1 }}
                    >
                        {getFieldDecorator('shelfTimeout', ({
                            initialValue: detailInfo.shelfTimeout,
                            rules: [{ required: true, message: '请输入间隔收费' }],
                        }))(
                            <InputNumber
                                min={0}
                                step={1}
                                placeholder="请输入"
                                style={{ width: '100%' }}
                            />,
                        )}
                    </Item>
                    <span className="marginL8" style={{ lineHeight: '32px' }}>小时</span>
                </Col>
            </Row>
        </Card>
    )

    renderToHeapElem = (getFieldDecorator: any, detailInfo: any, maxCents: any, maxPercentage: any) => (
        <Card title="地堆取件超时配置" bordered={false} className="paddingB20">
            <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                <Col
                    md={8}
                    sm={24}
                    style={{ display: 'flex' }}
                >
                    <Item
                        label="收费价格"
                        colon={false}
                        style={{ flex: 1 }}
                    >
                        {getFieldDecorator('tempCharge', ({
                            initialValue: detailInfo.tempCharge,
                            rules: [{ required: true, message: '请输入收费价格' }],
                        }))(
                            <InputNumber
                                min={0}
                                max={maxCents}
                                step={1}
                                placeholder="请输入"
                                style={{ width: '100%' }}
                            />,
                        )}
                    </Item>
                    <span className="marginL8" style={{ lineHeight: '32px' }}>分</span>
                </Col>
                <Col
                    md={8}
                    sm={24}
                    style={{ display: 'flex' }}
                >
                    <Item
                        label="免费时间"
                        colon={false}
                        style={{ flex: 1 }}
                    >
                        {getFieldDecorator('tempNormalTime', ({
                            initialValue: detailInfo.tempNormalTime,
                            rules: [{ required: true, message: '请输入免费时间' }],
                        }))(
                            <InputNumber
                                min={0}
                                step={1}
                                placeholder="请输入"
                                style={{ width: '100%' }}
                            />,
                        )}
                    </Item>
                    <span className="marginL8" style={{ lineHeight: '32px' }}>小时</span>
                </Col>
                <Col
                    md={8}
                    sm={24}
                    style={{ display: 'flex' }}
                >
                    <Item
                        label="间隔收费"
                        colon={false}
                        style={{ flex: 1 }}
                    >
                        {getFieldDecorator('tempTimeout', ({
                            initialValue: detailInfo.tempTimeout,
                            rules: [{ required: true, message: '请输入间隔收费' }],
                        }))(
                            <InputNumber
                                min={0}
                                step={1}
                                placeholder="请输入"
                                style={{ width: '100%' }}
                            />,
                        )}
                    </Item>
                    <span className="marginL8" style={{ lineHeight: '32px' }}>小时</span>
                </Col>
            </Row>
        </Card>
    )

    render() {
        const { getFieldDecorator, detailInfo, maxCents, maxPercentage } = this.props;

        return (
            <Fragment>
                {this.renderShelvesElem(getFieldDecorator, detailInfo, maxCents, maxPercentage)}
                {this.renderToHeapElem(getFieldDecorator, detailInfo, maxCents, maxPercentage)}
            </Fragment>
        );
    }
}

export default ShelvesToHeapElem;
